<template>
  <div class="detail-contrainer" 
  v-show="!loading"
>
    <div class="line"></div>
    <div class="first-category">
      <div class="title"><span>{{menu_list[0].title}}</span><span>：</span></div>
      <div class="category">
        <template v-for="item1 in menu_list[0].videoSortEntity">
          <a
            href="javascript:void(0);"
            :key="item1.id"
            :class="{ active: isChoose1 == item1.id }"
            @click="searchPosition($event, item1.parentId, item1.id)"
            >{{ item1.title}}</a
          >
        </template>
      </div>
    </div>
        <div class="third-category">
      <div class="title"><span>{{menu_list[1].title}}</span><span>：</span></div>
      <div class="category">
        <template v-for="item2 in menu_list[1].videoSortEntity">
          <a
            href="javascript:void(0);"
            :key="item2.id"
            :class="{ active: isChoose2 == item2.id }"
            @click="searchLanguage($event, item2.parentId, item2.id)"
            >{{ item2.title }}</a
          >
        </template>
      </div>
    </div>
    <div class="second-category">
      <div class="title"><span>{{menu_list[2].title}}</span><span>：</span></div>
      <div class="category">
        <template v-for="item3 in menu_list[2].videoSortEntity">
          <a
            href="javascript:void(0);"
            :key="item3.id"
            :class="{ active: isChoose3 == item3.id }"
            @click="searchShape($event, item3.parentId, item3.id)"
            >{{ item3.title }}</a
          >
        </template>
      </div>
    </div>
    <div class="content">
      <template v-for="item in lists">
        <div class="item" :key="item.videoId">
          <img
            :title="item.videoName"
            @click="look(item.videoId)"
            :src="item.videoCover"
            alt="图片加载失败"
            style="width:100%"
          />
          <div class="produce">
            <span>{{item.videoName}}</span>
          </div>
        </div>
      </template>
    </div>
    <div class="pagination">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import {getAllSort} from '../../api/search';
import {getAllVideo} from '../../api/video';
export default {
  name: "Detail",
  data() {
    return {
      loading:true,
      choosen: [],
      search1: "全部",
      search2: "全部",
      search3: "全部",
      isChoose1: 2,//地区
      isChoose2: 11,//类型
      isChoose3: 30,//年份
      currentPage:1,
      menu_list:[],
      limit:10,
      total:undefined,
      lists:[]
    };
  },
  methods: {
    //i->parentId,index->sonId
    searchPosition(e, i, index) {
      this.isChoose1 = index;
      console.log(i,index);
      
    },
    searchLanguage(e, i, index) {
      this.isChoose2 = index;
      console.log(i,index);
    },
    searchShape(e, i, index) {
      this.isChoose3 = index;
      console.log(i,index);
    },
    handleSizeChange(val){
      this.limit = val;
      getAllVideo(this.limit,this.currentPage).then(res=>{
        this.total = res.data.page.totalCount;
        this.lists = res.data.page.list;
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      getAllVideo(this.limit,this.currentPage).then(res=>{
        this.total = res.data.page.totalCount;
        this.lists = res.data.page.list;
      })
    },
    look(v_id){
      this.$router.push({
        path:'/second',
        query:{
          v_id
        }
      })
    },
    getAll() {
      getAllSort().then(res => {
        if(res.data.code == 0){
          this.menu_list = res.data.list;
        }else{
          this.$message.error(res.data.msg);
        }
        this.loading  = false;
      });
      getAllVideo(this.limit,this.currentPage).then(res=>{
        this.total = res.data.page.totalCount;
        this.lists = res.data.page.list;
      })
      if(this.$route.query.parentId==1){
        this.isChoose1 = this.$route.query.id
      }else if(this.$route.query.parentId==10){
        this.isChoose2 = this.$route.query.id;
      }else if(this.$route.query.parentId ==20){
        this.isChoose3 = this.$route.query.id
      }
    }
  },
  created(){
    this.getAll();
  },
};
</script>

<style lang="less" scoped>
.detail-contrainer {
  width: 100%;
  .line {
    width: 100%;
    height: 2px;
    background: #888484;
  }
  .first-category {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    .category {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      a {
        text-decoration: none;
        color: rgb(54, 57, 59);
        &:nth-child(n + 1) {
          margin-right: 10px;
        }
      }
      .active {
        color: red;
      }
    }
    .title {
      width: 100px;
      text-align: justify;
      text-align-last: justify;
    }
  }
  .second-category {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 100px 1fr;
    .category {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      a {
        text-decoration: none;
        color: rgb(54, 57, 59);
        &:nth-child(n + 1) {
          margin-right: 10px;
        }
      }
      .active {
        color: red;
      }
    }
    .title {
      text-align: justify;
      text-align-last: justify;
    }
  }
  .third-category {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    .category {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      a {
        text-decoration: none;
        color: rgb(54, 57, 59);
        &:nth-child(n + 1) {
          margin-right: 10px;
        }
      }
      .active {
        color: red;
      }
    }
    .title {
      width: 100px;
      text-align: justify;
      text-align-last: justify;
    }
  }
  .content {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    grid-gap: 15px 10px;
    .item {
      border: 1.5px solid rgb(74, 83, 90);
      box-shadow: 0px 0px 10px rgb(138, 143, 146);
      border-radius: 5px;
      padding: 5px;
      .produce {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        font-weight: 520;
      }
    }
  }
  .pagination{
    text-align: center;
  }
}
</style>